@baseUrl: '@{basePicUrl}';
// 可视窗口宽度
@viewportWidth: 1336px;
@viewportMaxWidth: 1600px;
// 可视窗口高度
@viewportHeight: 768px;
@activeFontColor: #0B8DDA;// 激活颜色
@successFontColor: #5cB85C;// 成功
@dangerFontColor: #E22127;// 失败（危险）
@blueFontColor: #0B8DDA;// 蓝色字体颜色
@blueBorderColor: #3294D1;// 蓝色边框
@activeBorderColor: #FF0036;// 激活边框颜色
@disabledBorderColor: #DCDCDC;// 禁用边框颜色
@contentTextColor: #666; // 内容文字
@switchTitleColor: #36b75c; //切换标题
@commentsTextColor: #999; // 注释文字
@warnTextColor: #FF0036; // 警告性文字
@labelTextColor: #ff9e36; // 标签文字
@succTextColor: #36b75c; // 成功文字颜色
@wireframeColor: #e5e5e5; // 线框
/*和路灯*/
@headerBackgroundColor: #fff;// header 头部颜色
@splitLinkColor: #d3d7da;// 分割线颜色
@borderLinkColor: #d3d7da;// 边框显色
@borderColor: #ccc;// 灰色边框
@mainBackgroundColor: #f9f9f9;// 主背景颜色
@mainFontColor: #646464;// 黑色字体
@fontColor: #fff;// 白色字体
@menuBackgroundColor: #515872;//菜单背景色
@hoverBackgroundColor: #393f58;//菜单悬浮背景色
@activeBackgroundColor: #3DB7D3;//菜单点击背景色
@btnBackgroundColor: #3EB7D4;/*蓝色按钮*/
@btnHoverColor: #31b0d5;/*悬浮蓝色按钮*/

//弹性布局
.flexlayout(@flex, @direction, @alignItems, @justifyContent, @flexWrap:wrap) {
  display: @flex;
  flex-direction: @direction;
  align-items: @alignItems;
  justify-content: @justifyContent;
  flex-wrap: @flexWrap;
}

.ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generateInput(@width,@height,@padding,@radius,@borderColor,@color,@backgroundColor) {
  display: inline-block;
  padding: @padding;
  min-width: @width;
  height: @height;
  border-radius: @radius;
  border: 1px solid @borderColor;
  color: @color;
  box-shadow: none;
  outline: none;
  &:hover,
  &:focus {
    outline: none;
    border-color: @borderColor;
    box-shadow: none;
  }
  &.disabled,
  &[disabled] {
    color: @color;
    background-color: @backgroundColor;
    border: none;
    box-shadow: none;
  }
}

.btn {
  @btnFontColor: @mainFontColor;
  display: inline-block;
  margin: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 0 12px;
  font-size: 14px;
  user-select: none;
  border-radius: 3px;
  &.btn-radius {
    border-radius: 3px;
  }
  &:focus,
  &:active:focus,
  &.active:focus,
  &.focus,
  &:active.focus,
  &.active.focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    outline: none;
  }
  &:hover,
  &:focus,
  &.focus {
    color: @btnFontColor;
    text-decoration: none;
  }
  &:active,
  &.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  }

  .generateBtn(@lineHeight,@fontColor,@backgroundColor,@borderColor,
                @focusColor,@focusBackgroundColor,@focusBorderColor,
                @hoverColor,@hoverBackgroundColor,@hoverBorderColor,
                @disabledBackgroundColor,@disabledBorderColor) {
    @btnBorderColor: #E0E0E0;
    @btnDisableColor: #FAFAFA;
    color: @fontColor;
    background-color: @backgroundColor;
    border-color: @borderColor;
    line-height: @lineHeight;
    &:focus, &.focus {
      color: @focusColor;
      background-color: @focusBackgroundColor;
      border-color: @focusBorderColor;
    }

    &:hover {
      color: @hoverColor;
      background-color: @hoverBackgroundColor;
      border-color: @hoverBorderColor;
    }

    &.disabled,
    &[disabled],
    &.disabled:hover,
    &[disabled]:hover,
    &.disabled:focus,
    &[disabled]:focus,
    &.disabled.focus,
    &[disabled].focus,
    &.disabled:active,
    &[disabled]:active,
    &.disabled.active,
    &[disabled].active,
    &.active {
      background-color: @disabledBackgroundColor;
      border-color: @disabledBorderColor;
    }
  }

  &.btn-blue {
    .generateBtn(23px, @fontColor, @btnBackgroundColor, @btnBackgroundColor,
            @fontColor, @btnHoverColor, @btnBackgroundColor,
            @fontColor, @btnHoverColor, @btnBackgroundColor,
            @borderColor, @borderColor);
  }
  &.btn-default {
    .generateBtn(30px, #FFF, #009BDB, #009BDB,
            #FFF, rgba(0, 155, 219, 0.7), #009BDB,
            #FFF, rgba(0, 155, 219, 0.7), #009BDB,
            @borderColor, @borderColor);
  }
  &.btn-gray {
    .generateBtn(23px, #666, #FAFCFB, #D9D9D9,
            #666, @fontColor, #D9D9D9,
            #666, @fontColor, #D9D9D9,
            @borderColor, @borderColor);
    background: linear-gradient(#FFFEFF, #E8E9ED);
  }
  &.btn-gray-sm {
    .generateBtn(30px, #666, #FAFCFB, #D9D9D9,
            #666, white, #D9D9D9,
            #666, white, #D9D9D9,
            #ccc, #ccc);
    background: linear-gradient(#FFFEFF, #E8E9ED);
    &:hover {
      background: #E8E9ED !important;
    }
  }
  &.btn-gray-confirm {
    .generateBtn(30px, #666, #FAFCFB, #D9D9D9,
            #666, white, #D9D9D9,
            #666, white, #D9D9D9,
            #ccc, #ccc);
    background: linear-gradient(#FFFEFF, #E8E9ED);
    &:hover {
      background: #E8E9ED !important;
    }
  }

}

.primary_btn{
  border: none;
  outline: none;
  background-color:@btnBackgroundColor;
  border-radius: 4px;
  cursor: pointer;
  color:@fontColor;
  padding:6px 25px;
  margin-right: 10px;
}
a.primary_btn:hover{
  color:@fontColor;
}
.default_btn{
  border: none;
  outline: none;
  background-image: url(../../img/icon/botton-bg1.png);
  background-size:100% 100%;
  border-radius: 4px;
  cursor: pointer;
  margin:0 10px;
  padding:8px 25px;
}
.default_btn:hover{color: @btnHoverColor;}
.primary_btn.cancle_btn{
  margin: 0 50px;
}

.primary_btn:hover{
  color: @fontColor;
  background-color: @btnHoverColor;
}

a.primary_btn{
  display: inline-block;
}


[v-cloak] {
  display: none;
}

/*
.lifecycle_map{
  width: 100%;
  height: 35rem;
  margin-top: 30px;
  padding: 10px;
  vertical-align: top;
  border: 1px solid #cdd1d4;
}*/

.ztree * {
  font-family: "Microsoft Yahei";
  font-size: 14px;
}

.ztree li a.curSelectedNode{/*和路灯*/
  height: 22px !important;
}
